<template>
  <el-col :span="widthCol" class="container-right">
    <div class="title">青岛市企业设立情况分析</div>
    <el-row>
      <el-col :span="8">
        <div class="panel-left-1 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-enterpriseGrowth.png" width="28px" />企业类型占比</div>
            <div class="enterpriseGrowthBox">
              <ul>
                <li v-for="(item, index) in growthArr" :key="index">
                  <div class="tit">{{ item.title }}</div>
                  <div style="overflow: hidden;">
                    <span class="serialNum">{{ index + 1 }}</span>
                    <div class="progressBg"><div class="progress" :style="{width: item.progress + '%'}"></div></div>
                    <span class="num">增长{{ parseFloat(item.progress) }}%</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel-left-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-esTrend.png" width="28px" />网办与窗口占比</div>
            <div id="myChart_8" :style="{width: '100%', height: '440px'}"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="panel-middle-1">
          <el-row>
            <el-col :span="12" style="padding-left: 20px;">
              <div class="usersNum usersNum1 common-panpel">
                <div class="angle angle-left-top"></div>
                <div class="angle angle-left-bottom"></div>
                <div class="angle angle-right-top"></div>
                <div class="angle angle-right-bottom"></div>
                <div class="num">{{ companyData.market_num4 }}</div>
                <div class="tit">市场主体实有用户</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left: 20px;">
              <div class="usersNum usersNum2 common-panpel">
                <div class="angle angle-left-top"></div>
                <div class="angle angle-left-bottom"></div>
                <div class="angle angle-right-top"></div>
                <div class="angle angle-right-bottom"></div>
                <div class="num">{{ companyData.new_market_num4 }}</div>
                <div class="tit">新登记市场实有用户</div>
              </div>
            </el-col>
          </el-row>
          <div id="myChart_15" :style="{width: '100%', height: '600px'}"></div>
          <div class="tuli"><span></span>各区（市）当天注册资本最高的企业</div>
        </div>
        <div class="panel-middle-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px 25px 0;">
            <div class="subTit"><img src="../../assets/icon/icon-industryShare.png" width="28px" />新登记企业数据</div>
            <div id="myChart_10" :style="{width: '100%', height: '250px'}"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="panel-right-1 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-industryShare.png" width="28px" />三大产业分布</div>
            <div id="myChart_9" :style="{width: '100%', height: '440px'}"></div>
          </div>
        </div>
        <div class="panel-right-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../../assets/icon/icon-enterpriseTotalNum.png" width="28px" />资本占比</div>
            <el-row>
              <el-col :span="8">
                <div id="myChart_11" :style="{width: '100%', height: '250px'}"></div>
              </el-col>
              <el-col :span="8">
                <div id="myChart_12" :style="{width: '100%', height: '250px'}"></div>
              </el-col>
              <el-col :span="8">
                <div id="myChart_13" :style="{width: '100%', height: '250px'}"></div>
              </el-col>
            </el-row>
            <div class="tips">
              <p>
                <span class="circle" style="background: #6200D0;"></span>
                <span class="tit">私营企业注册资本总量</span>
                <span class="num" style="color: #6200D0;">{{ companyData.capital_num3 }}亿元</span>
              </p>
              <p>
                <span class="circle" style="background: #008AFF;"></span>
                <span class="tit">个体工商注册资本总量</span>
                <span class="num" style="color: #008AFF;">{{ companyData.capital_num5 }}亿元</span>
              </p>
              <p>
                <span class="circle" style="background: #00FFFF;"></span>
                <span class="tit">农民专业合作社注册资本总量</span>
                <span class="num" style="color: #00FFFF;">{{ companyData.capital_num4 }}亿元</span>
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>
import QDMapJson from '../../assets/echartMap-QD.json'

export default {
  name: 'enterpriseEstablishment',
  props: {
      widthCol: {
        type: Number,
        default: 12
      }
  },
  data () {
    return {
      // 企业类型占比
      growthArr: [],
      companyData: {},
      big_enterprise_list: []
    }
  },
  mounted() {
    this.getCompanyData() // 获取企业设立情况分析数据
    this.getMapData() // 获取地图数据
  },
  methods: {
    // 获取青岛市企业设立情况分析数据
    getCompanyData() {
      // http://15.72.177.8:8081/enterprise
      // http://amr-wsdj.qingdao.gov.cn/iaicweb/restful/yctzxRestful/queryYctStatistics
      this.$http.post(window.SITE_CONFIG.apiURL + '/enterprise', {}).then(res => {
        this.companyData = res.body.result
        this.growthArr = [
          {
            title: '内资企业',
            progress: this.companyData.enterprise_proportion1
          }, {
            title: '外商投资企业',
            progress: this.companyData.enterprise_proportion2
          }, {
            title: '私营企业',
            progress: this.companyData.enterprise_proportion3
          }, {
            title: '农民专业合租社',
            progress: this.companyData.enterprise_proportion4
          }, {
            title: '个体工商户',
            progress: this.companyData.enterprise_proportion5
          }
        ]
        
        this.companyData.capital_num3 = (res.body.result.capital_num3 / 10000).toFixed(2)
        this.companyData.capital_num4 = (res.body.result.capital_num4 / 10000).toFixed(2)
        this.companyData.capital_num5 = (res.body.result.capital_num5 / 10000).toFixed(2)
        
        this.renderChart_esType()
        this.renderChart_industryShare()
        this.renderChart_cityCompanyNum()
        this.renderChart_syqy()
        this.renderChart_gtgs()
        this.renderChart_nnhzs()

      }).catch(() => {})
    },
    // 获取地图数据
    getMapData() {
      this.$http.post(window.SITE_CONFIG.apiURL + '/enterprise-location', {}).then(res => {
        let arr = []
        res.body.map(item => {
          if (item.location !== undefined) {
            arr.push({
              name: item.enterprise_name,
              address: item.enterprise_address,
              value: item.location.split(',')
            })
          }
        })
        this.big_enterprise_list = arr
        this.renderChart_QDMap()
      }).catch(() => {})
    },
    // 企业入驻数趋势
    renderChart_esTrend() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_7'))
      // 绘制图表
      const option = {
        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: '17%', // 等价于 y: '16%'
          left: '3%', 
          right: '8%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          type: 'category',
          data: ['2020/02', '2020/03', '2020/04', '2020/05', '2020/06', '2020/07'],
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: 0, // x轴文字倾斜 -25
            textStyle: {
              fontSize: 16,
              color: '#ffffff'
            }
          },
          boundaryGap: false
        }],
        yAxis: [{
          name: '个',
          nameTextStyle:{
            color: '#fff', 
            fontSize: 18
          },
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 18,
              color: '#ffffff'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '',
          type: 'line',
          data: [349, 489, 280, 590, 789, 300],
          symbolSize: 6,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            color: '#00F2FE'
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 18
            }
          },
          itemStyle: {
            normal: {
              color: '#00F2FE',
              borderColor: '#00F2FE'
            }
          },
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00EBFF'
              }, {
                offset: 0.5,
                color: '#617DB6'
              }, {
                offset: 1,
                color: '#040F3D'
              }
            ])
          }
        }]
      }
      myChart.setOption(option)
    },
    // 网办与窗口占比
    renderChart_esType() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_8'))
      // let totalNum = 7516                
      // 绘制图表
      const option = {
        legend: {
          // orient: 'vertical',
          y: '88%', // 图例上下居中
          data: ['网上办理总数', '窗口办理总数'],
          textStyle: {
            color: '#ffffff',
            fontSize: 24
          },
          icon: "circle", //  这个字段控制形状  类型包括 circle， rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 20, // 设置宽度
          itemHeight: 20, // 设置高度
          itemGap: 10 // 设置间距
        },
        color: ['#00A0E9', '#f19e39'], // 
        series: [{ // 内边框的设置
          radius: ['25%', '26%'],
          center: ['50%', '45%'],
          type: 'pie',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          animation: false,
          tooltip: {
            show: false
          },
          itemStyle: {
            normal: {
              color: '#00DEFF'
            }
          },
          data: [{ value: 1, }],
        }, {
          name: '',
          type: 'pie',
          radius: ['30%', '60%'],
          center: ['50%', '45%'],
          label: {
            normal: {
              formatter: params => {
                return (
                  `${params.name}\n${params.value}户 (${params.percent.toFixed(2)}%)`
                )
              },
              color: '#fff',
              fontSize: 20,
              // padding: [0, -5, 0, -5],
            }
          },
          data: [
            {value: this.companyData.net_num, name: '网上办理总数'},
            {value: this.companyData.window_num, name: '窗口办理总数'}
          ]
        }, { // 外边框的设置
          radius: ['70%', '71%'],
          center: ['50%', '45%'],
          type: 'pie',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          animation: false,
          tooltip: {
            show: false
          },
          itemStyle: {
            normal: {
              color: '#13355c'
            }
          },
          data: [{ value: 1, }],
        }]
      }
      myChart.setOption(option)
    },
    // 三大产业占比
    renderChart_industryShare() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_9'))
      // 绘制图表
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          x: 'center', // 图例距离左的距离
          y: '5%', // 图例上下居中
          data: ['第一产业', '第二产业', '第三产业'],
          textStyle: {
            color: '#ffffff',
            fontSize: 25
          },
          icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 15, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 15 // 设置间距
        },
        color: ['#00FFC4', '#8300F4', '#FF9A01'],
        series: [{
          name: '',
          type: 'pie',
          radius: ['20%', '55%'],
          center: ['50%', '55%'],
          label: {
            normal: {
              formatter: params => {
                return (
                  `${params.name} \n ${params.value}%`
                )
              },
              color: '#fff',
              fontSize: 23,
              padding: [0, -5, 0, -5],
            }
          },
          data: [
            {value: this.companyData.first_industry_proportion, name: '第一产业'},
            {value: this.companyData.second_industry_proportion, name: '第二产业'},
            {value: this.companyData.third_industry_proportion, name: '第三产业'}
          ]
        }]
      }
      myChart.setOption(option)
    },
    // 各市区入驻企业数
    renderChart_cityCompanyNum() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_10'))

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '8%',
          right: '0%',
          left: '0%',
          bottom: '35%'
        },
        xAxis: [{
          type: 'category',
          data: ['工商登记', '税务登记', '刻制印章', '社保办理', '医保办理', '公积金办理'],
          axisLabel: {
            margin: 45,
            color: '#fff',
            textStyle: {
              fontSize: 22
            },
            interval: 0,
            // formatter:function(params) {
            //   var newParamsName = "";
            //   var paramsNameNumber = params.length;
            //   var provideNumber = 4;  //一行显示几个字
            //   var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            //   if (paramsNameNumber > provideNumber) {
            //       for (var p = 0; p < rowNumber; p++) {
            //           var tempStr = "";
            //           var start = p * provideNumber;
            //           var end = start + provideNumber;
            //           if (p == rowNumber - 1) {
            //               tempStr = params.substring(start, paramsNameNumber);
            //           } else {
            //               tempStr = params.substring(start, end) + "\n";
            //           }
            //           newParamsName += tempStr;
            //       }

            //   } else {
            //       newParamsName = params;
            //   }
            //   return newParamsName
            // },
          },
          axisLine: {
            show: false
          }
        }],
        yAxis: [{
          show: false,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
        }],
        series: [{
          type: 'bar',
          zlevel: 1,
          data: [this.companyData.new_enterprise_num1, this.companyData.new_enterprise_num2, this.companyData.new_enterprise_num3, this.companyData.new_enterprise_num4, this.companyData.new_enterprise_num5, this.companyData.new_enterprise_num6],
          barWidth: '20px',
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00FFFF' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#00AFF8' // 100% 处的颜色
              }], false),
              barBorderRadius: [30, 30, 30, 30],
              shadowColor: 'rgba(0,160,221,1)',
              shadowBlur: 4,
            }
          },
          label: {
            normal: {
              formatter: '{c}个',
              show: true,
              color: '#fff',
              fontSize: 24,
              position: 'bottom'
            }
          }
        },
        // {
        //   name: '',
        //   type: 'bar',
        //   barWidth: 20,
        //   barGap: '-100%',
        //   data: [300000, 300000, 300000, 300000, 300000, 300000, 300000, 300000, 300000],
        //   itemStyle: {
        //     normal: {
        //       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //         offset: 0,
        //         color: 'rgba(0, 255, 255, 0.3)' // 0% 处的颜色
        //       }, {
        //         offset: 1,
        //         color: 'rgba(0, 175, 248, 0.3)' // 100% 处的颜色
        //       }], false),
        //       barBorderRadius: 20,
        //     }
        //   },
        // }
        ]
      }
      myChart.setOption(option)
    },
    // 资本占比-私营企业
    renderChart_syqy() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_11'))
      let option = {
        backgroundColor: '#060f39',
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.companyData.capital_proportion3 / 100], // data个数代表波浪数
            color: [{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 1,
                color: 'rgba(209, 45, 156, 0.8)'
              },{
                offset: 0,
                color: 'rgba(94, 162, 239, 0.8)'
              }],
              globalCoord: false
            }],
            backgroundStyle: {
              borderWidth: 1,
              color: '#060f39'
            },
            label: {
              normal: {
                formatter: this.companyData.capital_proportion3 + '%',
                textStyle: {
                  fontSize: 32,
                  color: '#fff'
                }
              }
            },
            outline: {
              show: false,
            }
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["80%", "81%"],
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 1,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#6200D0'
                }
              }
            ]
          },
        ]
      }
      myChart.setOption(option)
    },
    // 资本占比-个体工商
    renderChart_gtgs() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_12'))
      let option = {
        backgroundColor: '#060f39',
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.companyData.capital_proportion5 / 100], // data个数代表波浪数
            color: [{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 1,
                color: 'rgba(13, 204, 255, 0.8)'
              }, {
                offset: 0,
                color: 'rgba(71, 96, 255, 0.8)'
              }],
              globalCoord: false
            }],
            backgroundStyle: {
              borderWidth: 1,
              color: '#060f39'
            },
            label: {
              normal: {
                formatter: this.companyData.capital_proportion5 + '%',
                textStyle: {
                  fontSize: 32,
                  color: '#fff'
                }
              }
            },
            outline: {
              show: false,
            }
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["80%", "81%"],
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 1,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#008AFF'
                }
              }
            ]
          },
        ]
      }
      myChart.setOption(option)
    },
    // 资本占比-农民专业合作社
    renderChart_nnhzs() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_13'))
      let option = {
        backgroundColor: '#060f39',
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.companyData.capital_proportion4 / 100], // data个数代表波浪数
            color: [{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 1,
                color: 'rgba(143, 252, 160, 0.8)'
              }, {
                offset: 0,
                color: 'rgba(11, 203, 251, 0.8)'
              }],
              globalCoord: false
            }],
            backgroundStyle: {
              borderWidth: 1,
              color: '#060f39'
            },
            label: {
              normal: {
                formatter: this.companyData.capital_proportion4 + '%',
                textStyle: {
                  fontSize: 32,
                  color: '#fff'
                }
              }
            },
            outline: {
              show: false,
            }
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["80%", "81%"],
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 1,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#00FFFF'
                }
              }
            ]
          },
        ]
      }
      myChart.setOption(option)
    },
    // 青岛各区市地图
    renderChart_QDMap() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_15'))

      this.$echarts.registerMap('qingdao', QDMapJson)

      let option = {
        geo: {
          show: true,
          map: "qingdao",
          label: {
            normal: {
              show: false,
              color: "#fff"
            },
            emphasis: {
              show: false,
              color: "#fff"
            }
          },
          zoom: 1.25,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#060f39",
              borderWidth: 1,
              borderColor: "#016BBC"
            },
            emphasis: {
              areaColor: "rgba(107, 176, 207, .6)"
            }
          }
        },
        series: [
          {
            type: 'effectScatter',
            symbol: 'pin',
            symbolSize: 22,
            coordinateSystem: 'geo',
            geoIndex: 0,
            data: [],
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  return '{fline|' + params.data.name + '}';
                },
                position: 'top',
                backgroundColor: 'rgba(254, 174, 33, .85)',
                padding: [0, 0],
                borderRadius: 3,
                lineHeight: 32,
                color: '#f7fafb',
                rich:{
                  fline:{
                    padding: [10, 10, 10, 10],
                    color:'#ffffff',
                    fontWeight: 700,
                    fontSize: 18
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#e93f42',
                shadowBlur: 8,
                shadowColor: '#f00'
              }
            },
          }, {
            type: "map",
            mapType: "qingdao",
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 16,
                  fontWeight: 700
                },
                formatter: function(val) {
                  let { name, value } = val
                  return `${name}`
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: "#9dc6d6",
                areaColor: "rgba(78, 159, 202, .8)"
              },
              emphasis: {
                areaColor: "#6bb0cf"
              }
            },
            animation: false,
            data: [
              { "name": "市北区", "value": 1 },
              { "name": "市南区", "value": 1 },
              { "name": "李沧区", "value": 1 },
              { "name": "西海岸新区", "value": 1 },
              { "name": "城阳区", "value": 1 },
              { "name": "崂山区", "value": 1 },
              { "name": "即墨区", "value": 1 },
              { "name": "胶州市", "value": 1 },
              { "name": "平度市", "value": 1 },
              { "name": "莱西市", "value": 1 },
            ]
          }
        ],
        visualMap: {
          show: false,
          x: 'left',
          y: 'center',
          seriesIndex: [1],
          min: 0,
          max: 500,
          text: ['高', '低'], // 文本，默认为数值文本
          textStyle: {
            color: '#fff'
          },
          inRange: {
            color: [ '#284BF7' ]
          }
        }
      }
      if (option && typeof option === "object") {
        myChart.setOption(option, true)
      }
      var timer = setInterval(() => {
        //数据情况重绘，清除formatter移动效果，也可根据自身需求是否需要，删除这两行代码
        /*option.series[seriesjson[runidx].createType-1].data = [];
        myChart.setOption(option, true);*/
        let len = this.big_enterprise_list.length
        let dataidx = Math.floor(Math.random()*len)
        let name = this.big_enterprise_list[dataidx].name
        let address = this.big_enterprise_list[dataidx].address
        let valarr = this.big_enterprise_list[dataidx].value
        option.series[0].data = [{
          name: name,
          address: address,
          value: valarr
        }]
        myChart.setOption(option, true)
      },3000);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.title {
  height: 103px;
  background: url('../../assets/background/bg_tit.png') no-repeat;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 35px 0;
  background-size: 100%;
  background-position-y: 25px;
}

.container-right {
  padding-right: 30px;

  .subTit {
    font-size: 29px;
    color: #00D2FF;
    font-weight: 600;

    img {
      position: relative;
      top: 3px;
      margin-right: 10px;
    }
  }

  .cumulativeNum {
    float: right;

    .tit {
      font-size: 23px;
      color: #00FFF0;
    }

    .totalNum li {
      width: 31px;
      height: 44px;
      float: left;
      background: #002870;
      font-size: 33px;
      color: #00FFF0;
      text-align: center;
      margin-right: 5px;
    }
  }

  .enterpriseGrowthBox {
    padding: 0 0 0 35px;

    ul li {
      overflow: hidden;
      line-height: 42px;
    }

    .tit {
      font-size: 23px;
      font-weight: bold;    
      position: relative;
      top: 10px;
      left: 50px;
    }

    .num {
      color: #60F8FF;
      font-size: 23px;
      font-weight: bold;
      float: right;
    }

    .serialNum {
      background: url('../../assets/icon/icon-circular.png') no-repeat;
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #030C2C;
      font-size: 23px;
      font-weight: 700;
      position: relative;
      top: 5px;
    }

    .progressBg {
      width: 325px;
      height: 5.5px;
      background: #141b66;
      border-radius: 2px;
      display: inline-block;
      position: relative;
      bottom: 5px;

      .progress {
        background: linear-gradient(90deg, #0088FF 0%, #00F2FE 48%, #FCFFC0 100%);
        border-radius: 2px;
        height: 5.5px;
      }
    }
  }

  .enterpriseTotalNumBox {
    padding: 30px;
    overflow: hidden;

    .item {
      width: 127px;
      height: 135px;
      text-align: center;
      background: url('../../assets/background/bg-companyNum.png') no-repeat;
      margin: 0 auto;
    }

    .item-middle {
      margin-top: 35px;
    }
    
    .num {
      font-size: 42px;
      font-weight: 700;
      color: #00FCFF;
      font-family: AgencyFB;
      position: relative;
      top: 20px;
    }

    .tit {
      font-size: 23px;
      font-weight: 700;
      color: #ffffff;
      position: relative;
      top: 33px;
    }
  }

  .newRegistBox {
    background: url('../../assets/background/bg-newRegistCompany.png') no-repeat;
    width: 450px;
    height: 465px;
    margin: 20px auto;
    text-align: center;
    padding-top: 160px;
    box-sizing: border-box;

    .tit {
      font-weight: bold;
      font-size: 28px;
    }

    .num {
      color: #00FFC4;
      font-size: 46px;
      font-weight: bold;
      font-family: AgencyFB;
    }

    .circleItem {
      width: 107px;
      height: 107px;
      border-radius: 50%;
      font-size: 23px;
      font-weight: bold;
      padding: 22px 15px;
      box-sizing: border-box;
    }

    .circleItem-1 {
      background: linear-gradient(0deg, #015EEA, #00C0FA);
      box-shadow: 0 0 10px #00C0FA;
      position: absolute;
      top: 65px;
    }

    .circleItem-2 {
      background: linear-gradient(0deg, #FAD972, #FF9A01);
      box-shadow: 0 0 10px #FF9A01;
      position: relative;
      top: -285px;
      left: 330px;
    }

    .circleItem-3 {
      width: 124px;
      height: 124px;
      padding: 30px 20px;
      background: linear-gradient(0deg, #0EAE8A, #28D7B4);
      box-shadow: 0 0 10px #28D7B4;
      position: relative;
      top: -160px;
      left: -75px;
    }

    .circleItem-4 {
      background: linear-gradient(0deg, #4F6DCD, #6E8DF1);
      box-shadow: 0 0 10px #6E8DF1;
      position: relative;
      top: -350px;
      left: 400px;
    }

    .circleItem-5 {
      background: linear-gradient(0deg, #0068AF, #0DF6F2);
      box-shadow: 0 0 10px #0DF6F2;
      position: relative;
      top: -260px;
      left: 80px;
    }

    .circleItem-6 {
      background: linear-gradient(0deg, #53408F, #8A00FF, #BE26E4, #9299F3);
      box-shadow: 0 0 10px #8A00FF;
      position: relative;
      top: -400px;
      left: 300px;
    }
  }

  .angle {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  // 企业类型占比
  .panel-left-1 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 514px;
    margin-bottom: 15px;
    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 500px;
    //   left: 0;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 641px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   left: 641px;
    //   top: 500px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }

  // 网办与窗口占比
  .panel-left-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 514px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   left: 0;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   left: 0;
    //   bottom: 15px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   left: 641px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   left: 641px;
    //   bottom: 15px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }

  // 三次产业分布
  .panel-right-1 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 514px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   right: 559px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   top: 500px;
    //   right: 559px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   right: 0;
    //   top: 500px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }

  // 资产占比
  .panel-right-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 514px;
    margin-bottom: 15px;

    // .angle-left-top {
    //   right: 559px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   right: 559px;
    //   bottom: 15px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 0;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   right: 0;
    //   bottom: 15px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }

    .tips {
      p {
        overflow: hidden;
      }
      .circle {
        float: left;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: relative;
        top: 6px;
      }

      .tit {
        float: left;
        font-size: 23px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        padding-left: 15px;
      }

      .num {
        float: right;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: bold;
      }
    }
  }

  // 地图
  .panel-middle-1 {
    height: 707px;
    padding: 0 25px;
    margin-bottom: 15px;

    .tuli {
      color: #fff;
      font-size: 22px;
      font-weight: 700;
      float: right;
      position: relative;
      bottom: 32px;

      span {
        width: 20px;
        height: 20px;
        display: inline-block;
        background: #ec5550;
        box-shadow: 0 0 15px #ec5550;
        position: relative;
        top: 2px;
        right: 10px;
        border-radius: 50%;
      }
    }

    .usersNum {
      width: 300px;
      border: 1px solid rgba(0, 255, 255, 0.1);
      padding: 10px 0;
      text-align: center;
      height: 78px;

      .num {
        color: #00D2FF;
        font-size: 32px;
        font-family: Source Han Sans CN;
        font-weight: bold;
      }
      .tit {
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: bold;
      }
    }

    .usersNum1 {
      // .angle-left-top {
      //   top: 0px;
      //   left: 20px;
      //   border-top: 1px solid #037C93;
      //   border-left: 1px solid #037C93;
      // }

      // .angle-left-bottom {
      //   top: 84px;
      //   left: 20px;
      //   border-bottom: 1px solid #037C93;
      //   border-left: 1px solid #037C93;
      // }

      // .angle-right-top {
      //   top: 0px;
      //   left: 306px;
      //   border-top: 1px solid #037C93;
      //   border-right: 1px solid #037C93;
      // }
      
      // .angle-right-bottom {
      //   top: 84px;
      //   left: 306px;
      //   border-right: 1px solid #037C93;
      //   border-bottom: 1px solid #037C93;
      // }
    }

    .usersNum2 {
      // .angle-left-top {
      //   top: 0px;
      //   left: 364px;
      //   border-top: 1px solid #037C93;
      //   border-left: 1px solid #037C93;
      // }

      // .angle-left-bottom {
      //   top: 84px;
      //   left: 364px;
      //   border-bottom: 1px solid #037C93;
      //   border-left: 1px solid #037C93;
      // }

      // .angle-right-top {
      //   top: 0px;
      //   left: 650px;
      //   border-top: 1px solid #037C93;
      //   border-right: 1px solid #037C93;
      // }
      
      // .angle-right-bottom {
      //   top: 84px;
      //   left: 650px;
      //   border-right: 1px solid #037C93;
      //   border-bottom: 1px solid #037C93;
      // }
    }
  }

  // 各市区入驻企业数
  .panel-middle-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 323px;
    margin: 0 20px;

    // .angle-left-top {
    //   left: 677px;
    //   border-top: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-left-bottom {
    //   left: 677px;
    //   bottom: 15px;
    //   border-bottom: 1px solid #037C93;
    //   border-left: 1px solid #037C93;
    // }

    // .angle-right-top {
    //   right: 595px;
    //   border-top: 1px solid #037C93;
    //   border-right: 1px solid #037C93;
    // }
    
    // .angle-right-bottom {
    //   right: 595px;
    //   bottom: 15px;
    //   border-right: 1px solid #037C93;
    //   border-bottom: 1px solid #037C93;
    // }
  }
}
</style>